<template>
  <div class="pd-20">
    <el-select v-model="queryData.companyIds"
               clearable
               filterable
               multiple
               @change="handleOption('select')"
               placeholder="所属公司">
      <el-option v-for="item in companyList"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
      </el-option>
    </el-select>

    <el-input v-model="queryData.searchCondition"
              placeholder="套餐名称"
              clearable
              @clear="handleOption('select')"
              class="w-200"/>
    <el-select v-model="queryData.listStatus"
               class="w-200"
               clearable
               multiple
               @change="handleOption('select')"
               placeholder="审核状态">
      <el-option v-for="item in statusList"
                 :key="item.status"
                 :label="item.name"
                 :value="item.status">
      </el-option>
    </el-select>

    <el-button type="primary"
               @click="handleOption('select')">查询
    </el-button>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:indate="{row}">
        <p>{{ formatterDate(row.validityBeginTime) }}至{{ formatterDate(row.validityEndTime) }}</p>
      </template>
      <template v-slot:putaway="{row}">
        <el-tag type="success" v-if="row.status==1">已上架</el-tag>
        <el-tag type="danger" v-if="row.status==2">下架</el-tag>
      </template>
      <template v-slot:audit="{row}">
        <el-tag type="info" v-if="row.status==0">未审核</el-tag>
        <el-tag type="danger" v-if="row.status==-1">未通过</el-tag>
        <el-tag type="success" v-if="row.status==1">通过</el-tag>
        <el-tag type="warning" v-if="row.status==3">已过期</el-tag>
      </template>
      <template v-slot:option="{row}">
        <el-button type="primary"
                   @click="handleOption('detail', row)">详情
        </el-button>
      </template>
    </element-table>

    <el-dialog :visible.sync="showDetailDialog"
               title="详情"
               width="70%"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <el-form :model="detailData"
               label-position="right"
               label-width="180px"
               ref="formModelRef"
               :rules='rules'>
        <el-row>
          <el-col :span="12">
            <el-form-item label="套餐包名称:" class="is-required">
              <el-input class="w-300" :value="detailData.name" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="套餐包类型:" class="is-required">
              <el-input class="w-300" :value="filterType(detailData.type)" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="套餐包针对病种:" class="is-required">
              <el-input class="w-300" :value="detailData.themeDiseaseName" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="套餐包售价:" class="is-required">
              <el-input :value="detailData.price" class="w-300" disabled>
                <el-button slot="append">元</el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-form-item label="套餐包包含药量及用量:" class="is-required" v-if="detailData.chronicDiseasePackageDrugs.length>0">
          <element-table
            :columns="columnsDetail"
            :data="detailData.chronicDiseasePackageDrugs">
          </element-table>
        </el-form-item>


        <el-row>
          <el-col :span="12">
            <el-form-item label="套餐包开始时间:" class="is-required">
              <el-input class="w-300" :value="formatterDate(detailData.validityBeginTime)" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="套餐包结束时间:" class="is-required">
              <el-input class="w-300" :value="formatterDate(detailData.validityEndTime)" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="签约及服务奖励:" class="is-required">
              <el-input class="w-300" :value="detailData.signReward" disabled>
                <el-button slot="append">元</el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="续签奖励:" class="is-required">
              <el-input class="w-300" :value="detailData.renewalReward" disabled>
                <el-button slot="append">元</el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="天下医生产品配置:" v-if="detailData.familyDoctorStatus==1||detailData.privateDoctorStatus==1">
              <el-tag v-if="detailData.familyDoctorStatus==1">家庭医生包</el-tag>
              <el-tag v-if="detailData.privateDoctorStatus==1">私人医生包</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="套餐包服务费:" class="is-required">
              <el-input class="w-300" :value="detailData.serviceFee" disabled>
                <el-button slot="append">元/月</el-button>
              </el-input>
            </el-form-item>
          </el-col>

        </el-row>


        <el-form-item label="额外权益:">
          <el-input class="w-400" type="textarea" autosize :value="detailData.additionalRights" disabled/>
        </el-form-item>
        <el-form-item label="网点面诊医生服务:">
          <el-radio-group v-model="detailData.enableOwnDoctorService" disabled>
            <el-radio :label="0">无</el-radio>
            <el-radio :label="1">有</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="亮点:">
          <el-input class="w-400" :disabled="detailData.status!=0" autosize v-model="detailData.featuredHighlights"
                    type="textarea"/>
        </el-form-item>
        <el-form-item label="审核大咖头像:">
          <img :src="detailData.famousDoctorImg"
               width="100px"
               height="100px"
               style="border-radius: 50%"/>

        </el-form-item>
        <el-form-item label="审核大咖姓名:">
          <el-input disabled :value="detailData.famousDoctorName" class="w-300"/>
        </el-form-item>
        <el-form-item label="审核大咖介绍:">
          <el-input :disabled="detailData.status!=0" v-model="detailData.famousDoctorInfo" class="w-400" type="textarea"
                    autosize
                    placeholder="大咖介绍内容"/>
        </el-form-item>
        <el-form-item label="提交时间:">
          <p>{{ formatterDate(detailData.createTime) }}</p>
        </el-form-item>
        <el-form-item label="审核时间:" v-if="detailData.status!=0">
          <p>{{ formatterDate(detailData.authTime) }}</p>
        </el-form-item>
        <el-form-item label="审核人:" v-if="detailData.status!=0">
          <el-input class="w-300" :value="detailData.authUserName" disabled/>
        </el-form-item>
        <el-form-item label="审核意见:" prop="authStatus">
          <el-radio-group :disabled="detailData.status!=0" v-model="detailData.authStatus">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="-1">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="原因:" v-if="detailData.authStatus==-1" prop="returnReason"
                      :rules="detailData.authStatus==-1?rules.returnReason:[{required: false}]">
          <el-input class="w-400" v-model="detailData.returnReason" :disabled="detailData.status==-1" type="textarea"/>
        </el-form-item>
      </el-form>
      <p align="center">
        <el-button @click="handleOption('save')" v-if="detailData.status==0" v-prevent-re-click
                   type="primary">保存
        </el-button>
        <el-button @click="showDetailDialog=false"
                   type="info">返回
        </el-button>

      </p>

    </el-dialog>
  </div>
</template>

<script>
import ElementTable from '@/base/ElementTable'

export default {
  name: "index",
  data() {
    return {
      queryData: {
        listStatus: [],
        companyIds: [],
        searchCondition: ''
      },
      companyList: [],
      statusList: [
        {name: '未审核', status: 0},
        {name: '审核通过', status: 1},
        {name: '审核未通过', status: -1},
        {name: '下架', status: 2},
        {name: '已过期', status: 3},
      ],
      showDetailDialog: false,
      loading: false,
      pageTotal: 0,
      pageSize: 20,
      pageIndex: 1,
      tableData: [],
      tableDetailData: [{}],
      detailData: {
        name: '',
        type: '',
        themeDiseaseName: '',
        chronicDiseasePackageDrugs: [],
        signReward: '',
        renewalReward: '',
        famousDoctorImg: '',
        validityBeginTime: '',
        validityEndTime: '',
        familyDoctorStatus: 0,
        privateDoctorStatus: 0,
        additionalRights: '',
        enableOwnDoctorService: 0,
        famousDoctorName: '',
        famousDoctorInfo: '',
        authTime: '',
        authUserName: '',
        serviceFee: '',
      },
      columnsDetail: [
        {
          label: '药品名称',
          prop: 'chronicDiseasePackageCompanyDrug.commonName',
          align: "center",
        }, {
          label: '货号',
          prop: 'chronicDiseasePackageCompanyDrug.productCode',
          align: "center",
        }, {
          label: '规格',
          prop: 'chronicDiseasePackageCompanyDrug.standard',
          align: "center",
        }, {
          label: '单位',
          prop: 'chronicDiseasePackageCompanyDrug.unit',
          align: "center",
        }, {
          label: '厂家',
          prop: 'chronicDiseasePackageCompanyDrug.factoryName',
          align: "center",
        },
        {
          label: '零售价',
          prop: 'chronicDiseasePackageCompanyDrug.price',
          align: "center",
        }, {
          label: '折后价',
          prop: 'chronicDiseasePackageCompanyDrug.discountPrice',
          align: "center",
        }, {
          label: '每月用量',
          prop: 'needUseAmount',
          align: "center",
        }
      ],
      columns: [
        {
          label: '所属公司',
          prop: 'companyName',
          align: "center",
          width: 200
        }, {
          label: '套餐包名称',
          prop: 'name',
          align: "center"
        }, {
          label: '所属类别',
          prop: 'type',
          align: "center",
          formatter: (row, cellValue) => {
            return this.filterType(row.type)
          },
        }, {
          label: '审核状态',
          prop: 'audit',
          align: "center",
          isSlot: true
        }, {
          label: '上架状态',
          prop: 'putaway',
          align: "center",
          isSlot: true
        }, {
          label: '针对病种',
          prop: 'themeDiseaseName',
          align: "center"
        }, {
          label: '有效期',
          prop: 'indate',
          align: "center",
          isSlot: true
        }, {
          label: '提交时间',
          prop: 'createTime',
          align: "center",
          formatter: (row, cellValue) => {
            return this.formatterDate(row.createTime)
          },
        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true,
          width: 200
        }
      ],
      rules: {
        name: [
          {required: true, message: '请输入一级药品名称'}
        ],
        authStatus: [
          {required: true, message: '请审核'}
        ],
        returnReason: [
          {required: true, message: '请输入拒绝原因'}
        ],
      }

    }
  },
  created() {
    this.getCompanyList()
    this.getList()
  },
  components: {
    'element-table': ElementTable
  },
  methods: {
    //查询公司
    getCompanyList() {
      this.post(this.api.company.companyList, {
        name: '',
        status: 1,
        pageIndex: 0,
        pageSize: 200
      }).then((res) => {
        if (res.data.code === '200') {
          this.companyList = res.data.object
        }
      })
    },
    //查询列表
    getList() {
      this.loading = true
      this.post(this.api.slowDisease.getAdminPackageList, {
        pageSize: this.pageSize,
        pageIndex: this.pageIndex - 1,
        ...this.queryData
      }).then((res) => {
        this.loading = false
        if (res.data.code === '200') {
          this.tableData = res.data.object
          this.pageTotal = res.data.totalNum;
        }
      })
    },
    handleOption(op, row) {
      switch (op) {
        case 'select':
          this.pageIndex = 1
          this.getList()
          break
        case 'detail':
          this.detailData = null
          this.showDetailDialog = true
          this.post(this.api.slowDisease.getAdminPackageDetail, {
            id: row.id
          }).then((res) => {
            this.detailData = res.data.object
            this.$set(this.detailData, 'authStatus', this.detailData.status)
          })
          break;
        case 'save':
          this.$refs.formModelRef.validate(async (valid) => {
            if (valid) {
              if (this.detailData.authStatus && this.detailData.authStatus != 0) {
                this.post(this.api.slowDisease.adminPackageAudit, this.detailData).then((res) => {
                  this.showDetailDialog = false
                  this.$message.success('操作成功')
                  this.getList()
                })
              } else {
                this.$message.error('请审核')
              }

            }
          })

          break

      }
    },

    // 时间转换
    formatterDate(time) {
      if (time)
        return this.commonFunction.timestampFormat(new Date(time), 'yyyy-MM-dd hh:mm')
      else
        return ''
    },
    filterType(type) {
      switch (type) {
        case 1:
          return '个人类-特价T配'
          break
        case 2:
          return '个人类-精品U选'
          break
        case 3:
          return '家庭类-特价T配'
          break
        case 4:
          return '家庭类-精品U选'
          break
      }
    },
    // 分页
    handleChangePage(page) {
      this.pageIndex = page;
      this.getList();
    },
  }
}
</script>

<style scoped>

</style>
